A view source web
PCのWebブラウザなら右クリックからソースコードを見ることができるが、それに関する論考
https://gyazo.com/feecf4a5f6821f9b07d8df33e967bb7d
内容
In the Fall of 2000, after the panic of the Y2K scare and the collapsing dot-com bubble, I sat in front of a Macintosh desktop computer running a program called HyperCard. I created stacks of virtual cards which I, or anyone at the computer, could click through to freely explore. I recall that navigating my stack from first card to last made little sense. Each card was a fragment of some concept I was thinking through with the program. Linking cards was my first impressionable encounter with the concepts of intertwingularity—Ted Nelson’s expressive term to describe the sense that there is no neat organization of knowledge: EVERYTHING IS DEEPLY INTERTWINGLED.
2000年の秋、Y2K問題のパニックとドットコムバブルの崩壊の後、私はMacintoshデスクトップコンピュータの前に座り、HyperCardというプログラムを動かしていた。私は仮想カードの束を作り、自分やそのコンピュータを使う誰もがクリックして自由に探索できるようにした。最初のカードから最後のカードへとスタックを移動する意味はほとんどなかったと記憶している。各カードは、私がプログラムを使って思考を巡らせていた概念の断片だった。カードをリンクさせる作業は、私が初めて強く印象づけられた「相互絡み合い性」の概念との出会いだった——テッド・ネルソンが提唱したこの表現豊かな用語は、知識に整然とした体系など存在せず、あらゆるものが深く絡み合っているという感覚を形容するものだ。 It was soon after this experience that I started to discover HTML. Programs like Microsoft FrontPage helped me author hypertext through a WYSIWYG (What You See Is What You Get) editor. Composing a “page” was done by adding elements to what seemed like an infinitely tall and wide document that I could assemble like Word Processing software and drawing programs. Like HyperCard, these programs considered the composing of HTML to be an open-ended practice—software with “low floors and high ceilings.” They started with the simplicity of editing elements on a page and allowed users to make the (often considerable) transition to expressing those objects in written code.
この経験の直後、私はHTMLを学び始めた。Microsoft FrontPageのようなプログラムは、WYSIWYG（見たままがそのまま出力される）エディタを通じてハイパーテキストを作成する手助けをしてくれた。「ページ」の作成は、無限に縦横に広がる文書のようでありながら、ワープロソフトや描画プログラムのように組み立てられるものに要素を追加することで行われた。HyperCardと同様に、これらのプログラムはHTML作成を「敷居が低く天井が高い」ソフトウェアとして捉えていた。ページ上の要素編集という単純な操作から始まり、ユーザーが（しばしば大きな）移行を経て、それらのオブジェクトを記述コードで表現できるようにしたのだ。 The act of assembling a website using these pieces of software felt different from learning a programming language. Content was authored by inserting elements on a page and a layout was clicked and dragged into existence as a container for words, images, and links to other pages represented as files and folders connected together. In contrast, view source was the textual space where syntax was laid bare.
これらのソフトウェアを用いてウェブサイトを組み立てる行為は、プログラミング言語を学ぶのとは異なる感覚だった。コンテンツはページ上に要素を挿入することで作成され、レイアウトはクリックとドラッグで生成される——それは単語や画像、他のページへのリンクを収める容器であり、それらはファイルやフォルダとして相互に接続されていた。対照的に、ソースコードの表示は構文がむき出しになるテキスト空間だった。
The ability to view source was introduced in the mid-1990’s through web browsers like Netscape Navigator 3.0, released in 1996. Clive Thompson’s book Coders notes that early versions of Netscape Navigator introduced view source as a “fun way to let people surfing the web to see this code, if they wanted to.” At the time it was called “Document Source,” and located under the “View” dropdown menu of the running application. When clicked on, a window would open showing the raw HTML of the page you were currently viewing. The window displays a disorienting stream of text with traces of visible content, files, and links that feel like encountering a new language.
ソースコードの表示機能は1990年代半ば、1996年にリリースされたNetscape Navigator 3.0などのウェブブラウザを通じて導入された。クライブ・トンプソンの著書『Coders』によれば、初期バージョンのNetscape Navigatorはソースコード表示を「ウェブを閲覧する人々が、もし望めばこのコードを見られる楽しい方法」として導入した。当時は「Document Source」と呼ばれ、動作中のアプリケーションの「表示」ドロップダウンメニュー内に配置されていました。クリックすると、現在閲覧中のページの生のHTMLを表示するウィンドウが開きます。このウィンドウには、可視コンテンツやファイル、リンクの痕跡が混在した、まるで未知の言語に出会ったかのような、混乱を招くテキストの連続が表示されます。 “Every single web page you visited contained the code showing you how it was created. The entire internet became a library of how-to guides on programming. If you wanted, you could cut and paste that code into a new file, change a few elements, and see what happened.”
On my personal websites view source meant being able to adapt and remix ideas. Like drawing a map, elements and pages acted as landmarks in the browser to be navigated between. As a self-initiated learner, being able to view source brought to mind the experience of a slow walk through someone else’s map.
「あなたが訪れたすべてのウェブページには、その作成方法を示すコードが含まれていた。インターネット全体がプログラミングの手引書ライブラリとなった。望むなら、そのコードを新しいファイルにコピー＆ペーストし、いくつかの要素を変更して、結果を確認できたのだ。」
私の個人サイトでは、ソースコードを見ることはアイデアを応用し再構築する手段でした。地図を描くように、要素やページはブラウザ内で移動するランドマークとして機能したのです。独学者としてソースコードを閲覧する行為は、誰かが描いた地図をゆっくりと歩き回る体験を想起させました。
This ability to “observe” software makes HTML special to work with. In particular, it’s sense of “transparency” as Clay Shirky wrote in April, 1998, numerating on what makes for “good” software:
このソフトウェアを「観察」する能力こそが、HTMLを扱う上で特別なものにしている。特にクレイ・シャーキーが1998年4月に「優れた」ソフトウェアの条件を列挙した際に述べた「透明性」という感覚が重要だ：
“Good tools are transparent. Web design is a conversation of sorts between designers, with the Web sites themselves standing in for proposal and response. Every page launched carries an attached message from its designer which reads "I think this is a pretty good way to design a Web page", and every designer reacting to that will be able to respond with their own work”
優れたツールは透明である。ウェブデザインとは、デザイナー同士の対話のようなものだ。ウェブサイト自体が提案と応答の役割を担っている。公開される各ページには、デザイナーからのメッセージが添付されている。「これはウェブページをデザインするかなり良い方法だと思う」と。それに反応するデザイナーは、自身の作品で応答することができるのだ。
優れたツールは透明である。ウェブデザインはデザイナー同士の対話のようなもので、ウェブサイト自体が提案と応答の役割を果たす。公開される各ページにはデザイナーからのメッセージが添付され、「これがウェブページをデザインする良い方法だと思う」と記されている。それに反応するデザイナーは誰でも、自身の作品で応答することができる。
I brought these early websites with me from computer to computer on 3½-inch floppy disk—like an improvised sneakernet before using free to low-cost servers—and opened them with the installed browser to share what I’d made with friends. In the moment, seeing something you had made on someone else's computer felt like a gift. It became an important gesture in what I was learning, the feedback loop of creating a website and being able to view it on another computer and continuing to change it over time.
これらの初期のウェブサイトを、3.5インチフロッピーディスクに保存して、コンピューターからコンピューターへと持ち歩いた——無料から低コストのサーバーを利用する前の、即席のスニーカーネットのようなものだ——そしてインストール済みのブラウザで開いて、自分が作ったものを友人と共有した。その瞬間、自分が作ったものが他人のコンピューターで表示されるのを見るのは贈り物のように感じられた。ウェブサイトを作り、別のコンピューターで閲覧し、時間をかけて変更を加え続けるというフィードバックループの中で、これは私が学んでいたことにおける重要な行為となった。
I sometimes wonder what happened to those original floppy disks. I’m sure the websites on them would continue to display as they had in 2000 if they found their way to a computer again. HTML, browsers, and the protocols they work with are incredibly durable ecosystems. You could open these websites as a series of plain text files using an editor. Alternatively, you could use the browser’s view source feature; a capability that allowed me to learn how other websites were created by seeing markup and what is rendered in tandem.
あのオリジナルのフロッピーディスクは今どうなっているのだろうと時々思う。もし再びコンピューターに接続されれば、そこに保存されていたウェブサイトは2000年当時と変わらず表示されるだろう。HTMLやブラウザ、そしてそれらが連携するプロトコルは驚くほど頑強な生態系だ。これらのウェブサイトはテキストエディタで一連のプレーンテキストファイルとして開くこともできる。あるいはブラウザの「ソースを表示」機能を使う手もある。この機能のおかげで、マークアップとレンダリング結果を同時に確認しながら、他のウェブサイトの構築方法を学ぶことができたのだ。
View source is still present in most web browsers as a menu option or a standardized address that could be typed in the address bar. In 2011 the IETF6 registered the pattern of using “view-source:https://…” to show the source code of a given page in plain text7—a view preserving much of the author’s formatting and presence. This can be in the form of comments, the traces of unused elements, and the idiosyncratic presentation of preformatted text. ソースの表示は、現在もほとんどのウェブブラウザでメニューオプションとして、あるいはアドレスバーに入力可能な標準化されたアドレスとして存在している。2011年、IETF6は「view-source:https://… という形式で、特定のページのソースコードをプレーンテキスト7で表示する手法を登録した。この表示形式は、コメントや未使用要素の痕跡、プレフォーマットされたテキストの固有の表現など、作成者の書式設定や存在感を多く保持している。 I often wonder what would happen if the ability to view source was made to be more present in the browsing experience—a gesture, or invitation, to see what and how a site is composed. What if the structure of an HTML file spoke further to the content being rendered? If an element had an inner voice, what would it say? Can this history and context be expressed in the way we interact with and learn from view source?
ソースコードを閲覧する機能がブラウジング体験の中でより身近なものになったらどうなるだろうと、私はよく考える。サイトが何を、どのように構成されているのかを見るためのジェスチャー、あるいは招待状として。HTMLファイルの構造が、レンダリングされるコンテンツについてさらに語りかけてきたら？要素に内なる声があったら、何を語るだろうか？この歴史と文脈は、ソースコードを閲覧して学び、対話する方法の中に表現できるのだろうか？
“Markup works similarly in the formulation of historical (electronic) texts. It has its own history (the versioning of SGML/HTML/XHTML), its own grammatical lineage (the development of some tags over others), its own narrative (the archaeological layers of comments attached to shared code), and even its own politics (language choices, browser compliance, and the choice to share code or retain its mystique as the writing of an invisible professional). Markup thus becomes a kind of ghostly writing dependent on context and history, rather than merely a means of formatting text.”
マークアップは、歴史的（電子）テキストの形成においても同様に機能する。それには独自の歴史（SGML/HTML/XHTMLのバージョン管理）、独自の文法的系譜（特定のタグが他より発展した経緯）、独自の物語（共有コードに付随するコメントの考古学的層）、さらには独自の政治性（言語選択、ブラウザの互換性、コードを共有するか、見えない専門家の筆跡として神秘性を保つかという選択）さえ存在する。したがってマークアップは、単なるテキストの書式設定手段ではなく、文脈と歴史に依存する一種の幽霊のような書き物となる。」
The ability to see marginalia through view source could be a place for this to happen. We can draw parallels with the physicality of a book—when you see a page in a book you are sometimes able to see the next page depending on the paper and the way it has been printed. I wonder if view source could be a similar gesture, a website being a porous material where its creation can be viewed at the same time. This idea draws its parallels to book publishing and the use of hidden markup from Helen J. Burgess:
ソース表示を通じて余白の書き込みを見られる機能は、これを実現する場となり得る。これは物理的な書籍との類似点を見出せる——紙質や印刷方法によっては、本の一ページを見た時に次のページが透けて見えることがある。ソース表示も同様の仕草となり得るのではないか。ウェブサイトは多孔質の素材であり、その生成過程を同時に閲覧できる。この概念は書籍出版とヘレン・J・バージェスの隠されたマークアップ使用法との類似性を示唆している：
“Long before the magical moment of “View Source,” print and book producers were already using their own forms of hidden markup: the symbols written on texts that contained instructions or marked points for the purposes of textual reproduction. These printers’ marks are the antecedents of today’s markup schema: they are marking up manuscripts in the same way we mark up electronic texts.”9 「ソースを表示」という魔法の瞬間が訪れるはるか以前から、印刷物や書籍の製作者たちは独自の隠されたマークアップ形式を使用していた。それはテキストに記された記号であり、複製作業のための指示や目印となるポイントを記載したものだ。これらの印刷者用記号は現代のマークアップ方式の先駆けである。彼らが原稿に施したマークアップは、私たちが電子テキストに施すマークアップと本質的に同じ手法なのである。」
“The HTML tags we can see in our browser’s “View Source” window are akin to early printers’ marks: they are not readily apparent, but they can be read if we know where to look, in the process of flipping back and forth between page and source code.”10 ブラウザの「ソースを表示」ウィンドウで確認できるHTMLタグは、初期の印刷者の印のようなものだ。それらは一見して明らかではないが、ページとソースコードを交互に見比べながら、どこを見ればよいかを知っていれば読み取ることができる。10 This brings to mind J. R. CARPENTER’s writing on A Handmade Web where a relationship is made “between handmade web pages and handmade print materials, such as zines, pamphlets, and artists books.”11 Pages made by hand, the presence of a person in motion, manipulating a medium as an act of self-publishing as well as an act of allowing others to contribute. これはJ.R.カーペンターが『ハンドメイド・ウェブ』で述べた、手作りのウェブページとジン、パンフレット、アーティストブックといった手作りの印刷物との間に築かれる関係性を想起させる11。手作業で制作されたページには、動きのある人間の存在感が宿る。それは媒体を操作する行為であり、自己出版の行為であると同時に、他者の参加を許容する行為でもある。 Our cursors are often gliding from one page of the page to another in the browser window. We take for granted the ease of this interaction as each element commands some level of attention by us, the viewers. A texture is created not just by the final rendered form, but also by how the layout is constructed, by the underlying language an author imparted in constructing these documents.
カーソルはブラウザウィンドウ内でページからページへと滑るように移動する。この操作の容易さは当然のことと思われているが、各要素は閲覧者である私たちから一定の注意を引く。テクスチャーは最終的なレンダリング形態だけでなく、レイアウトの構築方法、文書作成時に作者が与えた基盤となる言語によっても形成される。
I think of this as how Alexander Galloway describes the work of net artists, JODI (Joan Heemskerk and Dirk Paesmans): “The resulting aesthetic is, in this way, not entirely specified by the artists’ subjective impulses. Instead, the texture of code and computation takes over, and computing itself—its strange logic, its grammar and structure, and often its shape and color—produces the aesthetic.”12 For Jodi this consideration extends beyond what is shown in browsers, it includes the underlying protocols, standards, and applications that enable much of what we consider to be the internet today. 私は、アレクサンダー・ギャロウェイがネットアーティスト、ジョディ（ジョーン・ヘームスケルクとダーク・ペースマンス）の作品を次のように表現していることを思い起こします。「このようにして生まれる美学は、アーティストの主観的な衝動によって完全に決定されるものではありません。その代わりに、コードと計算のテクスチャが引き継ぎ、コンピューティングそのもの、つまりその奇妙なロジック、文法と構造、そして多くの場合その形や色によって美学が生み出されるのです。 Jodi にとって、この考察はブラウザに表示されるもの以上に、今日のインターネットの多くを可能にする基礎となるプロトコル、標準、アプリケーションにも及んでいます。
Examples drawing on this computation and code aesthetic include ASCII Town13 , a workshop influenced by concrete poetry and typewriter art. Participants created imaginary dwellings referencing the rich histories of ASCII art14. And Evan Roth's All HTML15, a page containing every HTML tag in alphabetical order. Browser default elements crudely composed in the browser window become fully legible when view source is used to observe how the file is constructed. この計算とコード美学に基づく例としては、具体詩やタイプライターアートに影響を受けたワークショップ「ASCII Town」が挙げられる。参加者はASCIIアートの豊かな歴史を参照しながら、架空の住居を創作した。またエヴァン・ロスによる「All HTML」は、HTMLタグをアルファベット順に並べたページである。ブラウザのデフォルト要素は、ブラウザウィンドウ内で粗雑に構成されているが、ソースを表示してファイルの構造を観察すると完全に読み取れるようになる。
From the book, to HyperCard, to the internet, information is encoded and “marked-up” as instructions so that it could be rendered into their intended form. View source is a gesture that sits somewhere in between these moments, another space where a visitor could reside with its own aesthetic qualities and materiality. The space is both complementing and in tension with being interoperable with a browser—the precision of syntax in determining if syntax is “valid” or not to the minutiae of comments left a HTML file for us to discover and trace its creation. 書籍からHyperCardへ、そしてインターネットへと、情報は指令として符号化され「マークアップ」されることで、意図された形態へと変換される。ソース表示はこれらの瞬間の中間地点に位置する行為であり、訪問者が独自の美的特性と物質性とともに留まることのできる、もうひとつの空間である。この空間は、ブラウザとの相互運用性を補完しつつも緊張関係にある——構文の「有効性」を判定する厳密さと、HTMLファイルに残された細かなコメントが織りなす、その生成過程を発見し辿るための痕跡との狭間で。 In the end, view source is a reminder that software is a human activity with all its nuance, and mundanity, laid bare waiting to be viewed in our browsers. View source is a slow space, a gesture to see the presence of a person, and a space to come back to.
結局のところ、ソースコードの表示は、ソフトウェアが人間の営みであり、そのニュアンスや日常性がすべて露わにされ、ブラウザで閲覧されるのを待っていることを思い出させてくれる。ソースコードの表示は、ゆっくりとした空間であり、人の存在を見るための仕草であり、再び訪れるべき場所なのだ。